<template>
    <div class='layout'>
        <div class='layout-header'>
            <div class='layout-header-logo' >
                <a @click="clickLogo">
                    <img src="../images/logo.png" style='height:30px;'>
                </a>
            </div>
            <div class='layout-header-use'>
                <!-- 应用 -->
                <slot name="app"></slot>
            </div>
            <div class='layout-heder-right'>
                <!-- 邀请有奖 -->
                <div style='display:flex;align-items:center' @click='invite'>
                    <div class='invite'>邀请有奖</div>
                    <div style='margin-right: 50px'>
                        <i class='iconfont icon-NEW1 invite-new'></i>
                    </div>
                </div>
                <!-- 特权 -->
                <slot name="privilege"></slot>
                <!-- 消息 -->
                <div style='position: relative;height: 64px;line-height: 64px;margin-right:30px' @click='notification'>
                    <Icon type="ios-bell-outline" size="18" style="line-height: 64px;"></Icon>
                    <div class='badge-dot' v-show='showDot'></div>
                </div>

                <Dropdown trigger='click'>
                    <div style="color:#4a5568;position:relative;">
                        <div style='height:64px;line-height:64px'>
                            <img v-if='useInfo.avater_id' v-lazy="useInfo.avater.url" class='avater-img'>
                            <img v-else src="../images/avater.png" class='avater-img'>
                            <Icon type="chevron-down" color='#9ea7b4'></Icon>
                        </div>
                        <div class='avater-qiye' v-show='userType.type == 1'></div>
                        <i class='iconfont icon-icon-test34 avater-qiye-icon' v-show='userType.type == 1'></i>
                    </div>
                    <DropdownMenu slot="list" style='width:150px' class='dropmenu-head'>
                        <p class='nickname' style='color:#1c2438;margin-top:10px'>{{useInfo.nickname || user.phone}}</p>
                        <p class='nickname' style='color:#657180;font-size:14px;margin-bottom: 10px'>{{user.phone}}</p>
                        
                        <a href="https://cloud.qingful.com/doc/#/zh-cn/" target="_blank">
                            <DropdownItem style='color:#657180'>开发文档</DropdownItem>
                        </a>
                        <a href="https://cloud.qingful.com" target="_blank">
                            <DropdownItem style='color:#657180'>联系我们</DropdownItem>
                        </a>
                        <router-link to='/home/public/login'>
                            <DropdownItem style='color:#657180'>退出</DropdownItem>
                        </router-link>
                    </DropdownMenu>
                </Dropdown>
            </div>
        </div>
        <div class="layout-menu">
            <ul>
                <li class='menu-li' :class='{"mainMenu-li-selected":mainMenuActiveId==index}' @click='selectMenu(index)' v-for='(item,index) in mainMenu'>
                    <i class='iconfont' :class='item.icon' style='font-size:26px;'></i>
                    <p>{{item.name}}</p>
                </li>
            </ul>
        </div>
        <div class="layout-submenu" v-show='subMenu.length || createData'>
            <div class='layout-submenu-title'>{{submenuTitle}}</div>
            <div v-show='createData'>
                <div class='btn-data' @click='createdData'>创建数据表</div>
                <!-- <div class='btn-data' @click='createSql'>执行SQL</div> -->
            </div>
            <ul>
                <li class='submenu-li' :class='{"submenu-li-selected":subMenuActiveId==index+1}' @click='selectsubMenu(index)' v-for='(item,index) in subMenu'>{{item.name}}</li>
            </ul>
        </div>
        <div class='layout-content' :class='{"right-border":subMenu.length || createData}' @click='help_modal=false'>
            <div class='layout-right' ref='layoutCopyright'> 
                <div>
                    <router-view></router-view>
                </div>
            </div>
            <div class='layout-copyright'>
                <span>版权所有©青否科技有限公司</span>
            </div>
            
            <!-- 创建数据表 -->
            <Modal v-model="modal" width="600">
                <p slot="header">
                    <span>创建数据表</span>
                </p>
                <div>
                    <Form :label-width='60'>
                        <FormItem label='名称'>
                            <p slot='label'><span class='star'>*</span>名称</p>
                            <Input v-model='formItem.table' placeholder='请输入数据表名称' :maxlength='64'></Input>
                        </FormItem>
                        <FormItem label='引擎'>
                            <Select v-model='formItem.engine'>
                                <Option value="0">(引擎)</Option>
                                <Option v-for="item in configData.engines" :value="item" :key="item">{{ item }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label='校对'>
                            <Select v-model="formItem.collate">
                                <Option value="0">(校对)</Option>
                                <OptionGroup :label="item.name" v-for='item in configData.collates' :key='item.name'>
                                    <Option v-for="sub in item.sub" :value="sub" :key="sub">{{ sub }}</Option>
                                </OptionGroup>
                            </Select>
                        </FormItem>
                        <FormItem style="display:none;">
                            <Input></Input>
                        </FormItem>
                    </Form>
                </div>
                <div slot="footer">
                    <button class='btn-cancel' @click="cancel">取消</button>
                    <button class='btn-sure' @click="sure">确认</button>
                </div>
            </Modal>
            <!-- 执行SQL -->
            <Modal v-model="sql_modal" width="600">
                <p slot="header">
                    <span>SQL</span>
                </p>
                <div>
                     <Input type='textarea' class='sql_input'></Input>
                </div>
                <div slot="footer">
                    <button class='btn-cancel' @click="cancel">取消</button>
                    <button class='btn-sure' @click="sqlSure">确认</button>
                </div>
            </Modal>
        </div>
        <!-- 帮助 -->
        <div @click='helpLink' class='layout-help-btn'>帮助?</div>
        <div class='layout-help' :class='{"active":help_modal}'>
            <Icon type="ios-close-empty" class='close-round' @click.native='closeHelp'></Icon>
            <div style='text-align:center;font-size:0'>
                <img src="../images/mmqrcode.png" style='width:120px;height:120px;'>
                <div style='margin-top:20px;font-size:16px;color:#464C5B;'>扫描二维码，咨询云妹</div>
            </div>
            <div class='help-dianhua'>
                <i class='iconfont icon-dianhua'></i>
                <span style='margin-left: 30px'>0371-55693477</span>
            </div>
            <div class='help-wendang'>帮助文档</div>
            <div style='margin-bottom:14px;position: relative'>
                <div class='help-arrow'></div>
                <div class='help-line'></div>
            </div>
            <div>
                <ul style='display:flex;width: 164px;margin: 0 auto;'>
                    <li class='help-li' @click='helpDoc(1)'>
                        <div class='help-num'>1</div>
                        <div class='help-name'>数据表</div>
                    </li>
                    <li class='help-li' @click='helpDoc(2)'>
                        <div class='help-num'>2</div>
                        <div class='help-name'>云函数</div>
                    </li>
                </ul>
                <ul style='display:flex;width: 164px;margin: 12px auto 24px'>
                    <li class='help-li' @click='helpDoc(3)'>
                        <div class='help-num'>3</div>
                        <div class='help-name'>云插件</div>
                    </li>
                    <li class='help-li' @click='helpDoc(4)'>
                        <div class='help-num'>4</div>
                        <div class='help-name'>常见问题</div>
                    </li>
                </ul>
            </div>
            <a class='help-more' target="_blank" :href='lookMore()'>查看更多 <Icon type="ios-arrow-right"></Icon></a>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import axios from 'axios'
    export default {
        data(){
            return {
                mainMenuActiveId:0,
                subMenuActiveId:1,
                subMenu:[],
                submenuTitle:'',
                createData:false,
                copyright: this.getCoryright(),
                //创建数据表
                modal:false,
                formItem:{
                    table:'',
                    engine:'0',
                    collate:'0'
                },
                configData:{},
                user:{},
                useInfo:{},
                userType:{},
                sql_modal:false,
                noticeData:[],
                showDot:false,
                help_modal:false
            }
        },
        props: {
            logoLink: {
                default: '/home/dashboard/app'
            },
            mainMenu: {
                default: function () {
                    return [
                        {
                            name: '概况',
                            icon: 'cube',
                            url:''
                        }
                    ]
                }
            },
            appList:{
                default: function () {
                    return [
                        {
                            name: '应用'
                        }
                    ]
                }
            }
        },
        created(){
            const fullPath = this.$route.fullPath;
            this.selectMainMenu(fullPath);
            this.$bus.on('updateMainMenuActive', res => {
                this.selectMainMenu(res);
            });
            this.$bus.on('showSub', this.showSub);
            this.$bus.on('showPrivilege',this.showPrivilege)
            this.$bus.on('setNickname', this.getInfo);
            this.$bus.on('updateTable', this.getTable);
            this.$bus.on('showDot', (res)=>{
                this.showDot = res;
            });
            //用户信息
            this.getInfo();
            this.getNotices();
        },
        methods: {
            getNotices(){
                //消息提醒
                this.fetch('/home/notice').then(res=>{
                    if(res&&res.data.code&&res.data.data.length){
                        this.noticeData = res.data.data;
                        for(let key in this.noticeData){
                            if(this.noticeData[key].status == 0){
                                this.showDot = true;
                            }
                        }
                    }else{
                        this.showDot = false;
                    }
                })
            },
            showSub(name){
                if(name == '文档'){
                    this.subMenu = []
                    this.subMenu.push(
                        {
                            name:'文档',
                            url:'/home/plugin/doc'
                        })
                    this.$router.push(this.subMenu[0].url)
                    this.submenuTitle = '文档';
                    this.subMenuActiveId = 1;
                }else if(name == '验证码'){
                    this.subMenu = []
                    this.subMenu.push(
                        {
                            name:'短信验证码',
                            url:'/home/plugin/sms'
                        },
                        {
                            name:'图片验证码',
                            url:'/home/plugin/image'
                        })
                    this.$router.push(this.subMenu[0].url)
                    this.submenuTitle = '验证码';
                    this.subMenuActiveId = 1;
                }else if(name == '支付宝'){
                    this.subMenu = []
                    this.subMenu.push(
                        {
                            name:'支付宝配置',
                            url:'/home/plugin/alipay'
                        })
                    this.$router.push(this.subMenu[0].url)
                    this.submenuTitle = '支付宝';
                    this.subMenuActiveId = 1;
                }else if(name == '微信'){
                    this.subMenu = []
                    this.subMenu.push(
                        {
                            name:'微信配置',
                            url:'/home/plugin/wxpay'
                        })
                    this.$router.push(this.subMenu[0].url)
                    this.submenuTitle = '微信';
                    this.subMenuActiveId = 1;
                }else if(name == '小程序'){
                    this.subMenu = []
                    this.subMenu.push(
                        {
                            name:'小程序配置',
                            url:'/home/plugin/wxa'
                        })
                    this.$router.push(this.subMenu[0].url)
                    this.submenuTitle = '小程序';
                    this.subMenuActiveId = 1;
                }else if(name == '邮件'){
                    this.subMenu = []
                    this.subMenu.push(
                        {
                            name:'邮件配置',
                            url:'/home/plugin/mail'
                        })
                    this.$router.push(this.subMenu[0].url)
                    this.submenuTitle = '邮件';
                    this.subMenuActiveId = 1;
                }else{
                    this.$router.push('/home/plugin/plugin')
                }
                
            },
            showPrivilege(id){
                this.createData = false;
                this.mainMenuActiveId = 7;
                this.submenuTitle = '设置';
                this.subMenu = [];
                this.subMenu.push(
                    {
                        name:'基本信息',
                        url:'/home/config/config',
                    },
                    {
                        name:'应用特权',
                        url:'/home/privilege/privilege',
                    }
                )
                this.subMenuActiveId = 2;
            },
            getInfo(){
                this.fetch('/home/user').then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.user = res.data.data;
                        this.useInfo = res.data.data.user_info;
                        this.userType = res.data.data.user_type;
                        this.$bus.emit('userType',res.data.data.user_type)
                    }
                })
            },
            getTable(){
                this.fetch('/home/app/data/table').then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        
                        this.subMenu = [];
                        for(let key in res.data.data){
                            this.subMenu.push({name:res.data.data[key].Name,url:'/home/data/data'})
                        }
                        this.subMenuActiveId = 0;

                    }
                })
            },
            //选择一级菜单
            selectMenu(index){
                this.help_modal = false;
                this.mainMenuActiveId = index;
                this.subMenu = [];
                this.createData = false;
                if(this.mainMenu[index].url){
                    this.$router.push(this.mainMenu[index].url)

                    //数据表
                    if(this.mainMenu[index].url == '/home/data/table'){
                        this.subMenuActiveId = 0;
                        this.getTable();
                        this.getTableConfig();
                        this.createData = true;
                        
                        this.submenuTitle = this.mainMenu[index].title;
                    }

                }else{
                    this.submenuTitle = this.mainMenu[index].title;
                    this.subMenu = this.mainMenu[index].subMenu;
                    this.$router.push(this.mainMenu[index].subMenu[0].url)
                    this.subMenuActiveId = 1;

                }
                
            },
            //二级菜单
            selectsubMenu(index){
                this.help_modal = false;
                this.subMenuActiveId = index + 1;
                if(this.subMenu[index].url == '/home/data/data'){
                    this.$bus.emit('select_table',this.subMenu[index])
                    this.$router.push({path:this.subMenu[index].url,query:{name:this.subMenu[index].name}})
                }else{
                    this.$bus.emit('select_submenu',true);
                    this.$router.push(this.subMenu[index].url)
                }
                // else if(this.subMenu[index].url == '/home/file/web'){
                //     this.$bus.emit('menu_index',true);
                //     this.$router.push(this.subMenu[index].url)
                // }else{
                //     this.$router.push(this.subMenu[index].url)
                // }

            },
            selectMainMenu(path){
                if(path == '/home/data/table'){
                    this.createData = true;
                    this.subMenuActiveId = 0;
                    this.getTableConfig();
                }else{
                    this.createData = false;
                }
                if(path == '/home/plugin/doc'){
                    this.mainMenu[6].subMenu = [{
                        name:'文档',
                        url:'/home/plugin/doc'
                    }]
                }
                if(path == '/home/plugin/sms' || path == '/home/plugin/image'){
                    this.mainMenu[6].subMenu = [{
                        name:'短信验证码',
                        url:'/home/plugin/sms'
                    },
                    {
                        name:'图片验证码',
                        url:'/home/plugin/image'
                    }]
                    this.mainMenu[6].title = '验证码';
                    this.mainMenuActiveId = 6;
                }
                if(path == '/home/plugin/alipay'){
                    this.subMenu = [{
                        name:'支付宝配置',
                        url:'/home/plugin/alipay'
                    }]
                    this.submenuTitle = '支付宝';
                    this.mainMenuActiveId = 6;
                }
                if(path == '/home/plugin/wxpay'){
                    this.subMenu = [{
                        name:'微信配置',
                        url:'/home/plugin/wxpay'
                    }]
                    this.submenuTitle = '微信';
                    this.mainMenuActiveId = 6;
                }
                if(path == '/home/plugin/wxa'){
                    this.subMenu = [{
                        name:'小程序配置',
                        url:'/home/plugin/wxa'
                    }]
                    this.submenuTitle = '小程序';
                    this.mainMenuActiveId = 6;
                }
                if(path == '/home/plugin/mail'){
                    this.subMenu = [{
                        name:'邮件配置',
                        url:'/home/plugin/mail'
                    }]
                    this.submenuTitle = '邮件';
                    this.mainMenuActiveId = 6;
                }
                if(path.indexOf('/privilege')>0){
                    this.mainMenuActiveId = 7;
                    this.submenuTitle = '设置';
                    this.subMenu = [];
                    this.subMenu.push(
                        {
                            name:'基本信息',
                            url:'/home/config/config',
                        },
                        {
                            name:'应用特权',
                            url:'/home/privilege/privilege',
                        }
                    )
                    this.subMenuActiveId = 2;
                }

                if(path.indexOf('?name')>0){
                    let url = path.split('?name=')
                    this.mainMenuActiveId = 1;
                    this.submenuTitle = this.mainMenu[1].title;
                    this.createData = true;
                    this.subMenu = []
                    this.fetch('/home/app/data/table').then(res=>{
                        if(res&&res.data.data&&res.data.code){
                            this.subMenu = [];
                            for(let key in res.data.data){
                                this.subMenu.push({name:res.data.data[key].Name,url:'/home/data/data'})
                            }

                            for(let key in this.subMenu){
                                if(this.subMenu[key].name==url[1]){
                                    this.$bus.emit('select_table',this.subMenu[key])
                                    this.subMenuActiveId = key-0+1;
                                }
                            }
                        }
                    })
                    
                }
                if(path == '/home/dashboard/invite' || path == '/home/dashboard/notification'){
                    this.mainMenuActiveId = -1;
                }
                for (let key in this.mainMenu) {
                    if (this.mainMenu[key].url === path) {
                        this.mainMenuActiveId = key;
                        this.subMenu = [];
                        if(this.mainMenu[key].url == '/home/data/table'){

                            this.getTable();
                            
                            this.createData = true;
                            this.submenuTitle = this.mainMenu[key].title;
                        }
                    }

                    if(this.mainMenu[key].subMenu.length){

                        for(let k in this.mainMenu[key].subMenu){
                            if(this.mainMenu[key].subMenu[k].url == path){
                                this.subMenu = this.mainMenu[key].subMenu;
                                this.submenuTitle = this.mainMenu[key].title;
                                this.mainMenuActiveId = key;
                                this.subMenuActiveId = k-0 + 1;
                            }
                        }
                    }
                }
            },
            //创建数据表
            createdData(){
                this.modal = true;
                this.formItem = {
                    table:'',
                    engine:'0',
                    collate:'0'
                }
            },
            getTableConfig(){
                this.fetch('/home/app/data/info/table').then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.configData = res.data.data;
                    }
                })
            },
            sure(){
                if(!this.formItem.table){
                    this.$Message.warning('请填写数据表名称')
                    return;
                }
                this.formItem.engine = this.formItem.engine == 0 ? '' : this.formItem.engine;
                this.formItem.collate = this.formItem.collate == 0 ? '' : this.formItem.collate;
                this.fetch('/home/app/data/add/table',this.formItem).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.$Message.success('创建成功');
                        this.modal = false;
                        this.getTable()
                        this.$bus.emit('getTable',true)
                        this.$router.push('/home/data/table')
                    }
                })

            },
            cancel(){
                this.modal = false;
                this.sql_modal = false;
            },
            //执行sql
            createSql(){
                this.sql_modal = true;
            },
            sqlSure(){

            },
            clickLogo(){
                if (this.isHttpUrl(this.logoLink)) {
                    window.open(this.logoLink, '_self');
                } else {
                    this.selectMainMenu(this.logoLink);
                    this.$router.push(this.logoLink);
                }
            },
            
            //帮助
            helpLink(){
                this.help_modal = !this.help_modal;
            },
            closeHelp(){
                this.help_modal = false;
            },
            helpDoc(type){
                let link = 'https://cloud.qingful.com/doc/#/zh-cn/';
                if(type == 1){
                    window.open(`${link}table`, '_blank');
                }
                if(type == 2){
                    window.open(`${link}cloudFunction`, '_blank');
                }
                if(type == 3){
                    window.open(`${link}wx/quickstart`, '_blank');
                }
                if(type == 4){
                    window.open(`${link}commonProblem`, '_blank');
                }
            },
            lookMore(){   
                const fullPath = this.$route.fullPath;
                let link ='https://cloud.qingful.com/doc/#/zh-cn/';
                if(fullPath.indexOf('?name')>0){
                    return link;
                }
                switch (fullPath) {
                    case '/home/plugin/sms':
                        return `${link}plugins/smsCaptcha`;
                        break;
                    case '/home/plugin/image':
                        return `${link}plugins/pictureCaptcha`;
                        break;
                    case '/home/plugin/alipay':
                        return `${link}plugins/alipay`;
                        break;
                    case '/home/plugin/wxpay':
                        return `${link}wx/quickstart`;
                        break;
                    case '/home/plugin/wxa':
                        return `${link}wxa/quickstart`;
                        break;
                    case '/home/plugin/mail':
                        return `${link}plugins/mail`;
                        break;
                }
                for(let key in this.mainMenu){
                    if(this.mainMenu[key].url){
                        if(this.mainMenu[key].url == fullPath){
                            return this.mainMenu[key].link || link;
                        }
                    }else{
                        for(let k in this.subMenu){
                            if(this.subMenu[k].url == fullPath){
                                return this.subMenu[k].link || link;
                            }
                        }
                    }
                }
                return link;
            },
            //邀请
            invite(){
                this.$router.push('/home/dashboard/invite')
                this.mainMenuActiveId = -1;
                this.subMenuActiveId = 0;
                this.subMenu = [];
            },
            //消息
            notification(){
                this.$router.push('/home/dashboard/notification')
                this.mainMenuActiveId = -1;
                this.subMenuActiveId = 0;
                this.subMenu = [];
            }
        }
    }
</script>
<style scoped>
.layout{
    position:relative;
    min-width: 1280px;
}
.layout-header{
    width:100%;
    min-width: 768px;
    height:64px;
    padding-right: 36px;
    position:fixed;
    z-index: 999;
    box-shadow: 0 0 12px 0 #dcefff; 
    background: #fff;
}
.layout-header-logo{
    width:100px;
    height: 64px;
    text-align:center;
    float:left;
    padding:17px 0;
}
.layout-header-use{
    width:160px;
    height:100%;
    float: left;
    text-align: center;
}
.layout-heder-right{
    height:64px;
    float: right;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    padding:0 20px;
}
.invite{
    font-size:14px;
    color:#657180;
    line-height: 64px
}
.invite:hover{
    color:#06A0FD;
}
.invite-new{
    color:#FA3333;
    font-size:30px
}

.avater-img{
    width:38px;
    height:38px;
    vertical-align:middle;
    margin-right:8px;
    border-radius: 50%;
}
.avater-qiye{
    background:#ffbe41;
    width:20px;
    height:20px;
    border-radius:50%;
    overflow:hidden;
    position: absolute;
    bottom:8px;
    right:16px;
    border:2px solid #fff;
}
.avater-qiye-icon{
    font-size:10px;
    color:#fff;
    position: absolute;
    bottom:9px;
    right:20px;
}
.nickname{
    width:150px;
    padding:0 24px;
    font-size:16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
.layout-content{
    width:auto;
    min-height:100vh;
    background-color: #f2f7fb;
    padding:88px 24px 40px 124px;
    box-sizing: border-box;
}
/*左侧菜单*/
.layout-menu{
    width:100px;
    height:100%;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#048DFD), to(#09C0FD));
    box-shadow: 0 0 12px 0 #dcefff;
    position: fixed;
    top:64px;
    z-index:888;
    overflow: auto;
    padding-bottom: 80px
}
.layout-menu::-webkit-scrollbar {
    display: none
 /* 隐藏滚动条，但依旧具备可以滚动的功能 */
}
.menu-li{
    height:80px;
    text-align: center;
    color:#fff;
    padding:10px 0 10px;
    cursor:pointer;
    position: relative;
}
.menu-li p{
    width: 100%;
    font-size: 14px;
    position: absolute;
    top:43px;
    text-align: center;
}
.menu-li:hover{
    background-color: rgba(255,255,255,0.1);
}
.mainMenu-li-selected{
    background-color: rgba(255,255,255,0.2);
}
.layout-submenu{
    width:160px;
    height:100%;
    padding-top:16px;
    box-shadow: 0 0 12px 0 #dcefff;
    background: #fff;
    position: fixed;
    z-index:888;
    left:100px;
    top:64px;
    overflow: auto;
    padding-bottom: 80px
}
.layout-submenu::-webkit-scrollbar {
    display: none
 /* 隐藏滚动条，但依旧具备可以滚动的功能 */
}
.submenu-li{
    width: 100%;
    height:40px;
    line-height: 40px;
    color:#657180;
    text-align: center;
    font-size: 14px;
    padding:0 10px;
    cursor:pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
.submenu-li-selected{
    background: rgba(16,141,233,0.1);
    color:#06A0FD;
}
.layout-submenu-title{
    width:100%;
    height:40px;
    line-height: 40px;
    font-size: 14px;
    color:#464C5B;
    text-align: center;
}

.layout-right{
    background: #f2f7fb;
    box-sizing: border-box;
    padding-bottom: 60px;
}
.right-border{
    padding-left: 284px;
}
.btn-data{
    width:102px;
    height:34px;
    font-size:14px;
    line-height:34px;
    border:1px solid #D7DDE4;
    border-radius: 3px;
    text-align:center;
    margin: 10px auto;
    cursor:pointer;
    color: #657180
}
.btn-data:hover{
    color:#06A0FD;
    border:1px solid #06A0FD;
}
.badge-dot{
    width:7px;
    height: 7px;
    border-radius: 50%;
    background: #f30;
    position: absolute;
    top:18px;
    right: -6px;
}
.layout-copyright{
    text-align: center;
    font-size:12px;
    color:#657180;
    position:absolute;
    bottom:10px;
    left:50%;
}
.layout-help-btn{
    width:54px;
    height:54px;
    background: #06A0FD;
    border-radius: 50%;
    box-shadow: #06a0fd  0px 0px 10px 0px;
    position: fixed;
    z-index: 999;
    right:30px;
    bottom:58px;
    color:#fff;
    font-size: 14px;
    line-height: 54px;
    text-align: center;
    cursor:pointer;
}
.layout-help-btn:hover{
    background: rgba(26,160,253,0.9);
}
.layout-help{
    width: 300px;
    height:450px;
    padding:50px 0 40px 0;
    background: #fff;
    position: fixed;
    right:30px;
    bottom:122px;
    line-height: 1;
    z-index: 999;
    box-shadow:0 1px 16px #dcefff;
    transform: scale(0) translateY(-10px);
    opacity: 0;
    transform-origin: right bottom;
    transition: all .3s ease;
}
.layout-help.active {
    transform: scale(1) translateY(-10px);
    opacity: 1;
}

.close-round{
    position: absolute;
    top:12px;
    right:18px;
    cursor: pointer;
    font-size: 26px;
    color:#999;
}
.close-round:hover{
    color:#444;
}
.help-dianhua{
    color:#06A0FD;
    font-size: 16px;
    margin: 18px 0 40px;
    text-align:center
}
.help-dianhua i{
    font-size:22px;
    position: absolute;
    margin-top: -4px
}
.help-wendang{
    color:#06A0FD;
    font-size:16px;
    text-align:center;
    margin-bottom: 10px;
}
.help-arrow{
    position: absolute;
    left:50%;
    margin-left:-5px;
    top:-4px;
    background:#fff;
    width:8px;
    height:8px;
    border-left: 1px solid rgba(6,160,253,0.5);
    border-top: 1px solid rgba(6,160,253,0.5);
    transform: rotate(45deg);
}

.help-line{
    width:164px;
    height:1px;
    background:rgba(6,160,253,0.5);
    margin: 15px auto 0
}
.help-li{
    display:flex;
    align-items:center;
    width:82px;
    cursor:pointer;
}
.help-num{
    width:18px;
    height:18px;
    border-radius:50%;
    background:rgba(6,160,253,0.8);
    color:#fff;
    text-align:center;
    line-height: 18px;
}
.help-name{
    font-size:14px;
    color:#657180;
    margin-left: 8px;
    margin-top: 2px
}
.help-name:hover,.help-more:hover{
    color:#06A0FD;
}
.help-more{
    font-size:14px;
    color:#657180;
    text-align:center;
    cursor:pointer;
    display: block;
}
</style>
<style>
    .sql_input .ivu-input{
        height: 300px!important;
    }
    .ivu-select-dropdown{
        box-shadow: 0 1px 6px #dcefff!important; 
    }
    .dropmenu-head .ivu-dropdown-item{
        width:150px;
        padding:10px 24px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis
    }
    .dropmenu-head .ivu-dropdown-item:hover{
        background: rgba(16,141,233,0.1);
    }
</style>
